<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background: salmon;
            width: 300px;
            height: 300px;
            border: 1px solid #fff;
        }
        .boxA {
            /* 定位方式: 相对定位, 原来的位置保留 */
            /* position: relative; */
            /* 定位方式: 绝对定位, 脱离了文档流, 原位置被其他内容补充 */
            /* position: absolute; */
            /* 固定定位 指的是固定于当前窗口 */
            position: fixed;
            /* 定位坐标 */
            right: 20px;
            bottom: 20px;
            /* right: 30px; */
            /* bottom: 20px; */
        }
        .boxB {
            position: relative;
            /* 子绝父相: 子元素如果希望根据父元素绝对定位, 父元素记得加上相对定位设置, 才有效 */
        }
        .child {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    定位
    <div class="box boxA">
        第一个盒子
    </div>
    <div class="box boxB">
        <box class="box child">子盒子</box>
        第二个盒子
    </div>
    <div class="box boxB">
        第二个盒子
    </div>
    <div class="box boxB">
        第二个盒子
    </div>
    <div class="box boxB">
        第二个盒子
    </div>
    <div class="box boxB">
        第二个盒子
    </div>
</body>
</html>